<template>
  <!-- 注册页面 -->
  <div class="register">
    <div class="registerContainer">
      <el-form
        class="registerForm"
        :model="registerForm"
        ref="registerForm"
        :rules="rules"
      >
        <el-form-item>
          <div class="registerTitle">用户注册</div>
        </el-form-item>
        <el-form-item label="" prop="nickName">
          <el-input
            v-model="registerForm.nickName"
            placeholder="昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="mail">
          <el-input v-model="registerForm.mail" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="" prop="code">
          <el-row :gutter="0">
            <el-col :span="12">
              <el-input
                v-model="registerForm.code"
                placeholder="请输入验证码"
              ></el-input>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-button
                class="btn"
                type="primary"
                @click="getCode()"
                btnTitle="btnTitle"
                :disabled="disabled"
                >{{ btnTitle }}</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="register()"
            >注册</el-button
          >
          <el-form-item>
            <router-link :to="{ path: '/login' }">
              已有账号，直接登录</router-link
            >
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register, getAuthCode } from "@/api/userApi.js";
import qs from "qs";
import md5 from "js-md5";
export default {
  data() {
    var validateMail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else if (
        !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(
          value
        )
      ) {
        callback(new Error("请输入正确的邮箱"));
      }
      callback();
    };
    return {
      btnTitle: "获取验证码",
      disabled: false,
      registerForm: {
        nickName: "", //昵称
        mail: "", //邮箱
        password: "", //密码
        code: "", //邮箱验证码
      },
      rules: {
        nickName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入昵称",
          },
        ],
        mail: [
          {
            validator: validateMail,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
        ],
      },
    };
  },
  methods: {
    getCode() {
      if (this.registerForm.mail) {
        getAuthCode(
          qs.stringify({
            mail: this.registerForm.mail,
          })
        )
          .then((res) => {
            this.$message({
              message: res.data.data,
              type: "success",
              duration: 1000,
            });
          })
          .catch((err) => {
            this.$message({
              message: res.data.data,
              type: "error",
              duration: 1000,
            });
          });
        this.codeBtn();
      } else {
        this.$refs.registerForm.validate();
      }
    },
    codeBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.disabled = false;
        } else {
          //倒计时
          this.btnTitle = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },

    register() {
      register(
        qs.stringify({
          authCode: this.registerForm.code,
          password: md5(md5(this.registerForm.password)),
          nickname: this.registerForm.nickName,
          mail: this.registerForm.mail,
        })
      )
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.$router.push("/dashboard");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: err.message,
            type: "error",
          });
        });
    },
  },
};
</script>

<style>
.register {
  height: 100%;
  width: 100%;
  background-image: url("~@/assets/navImgs/background03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  position: absolute;
}
.registerContainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registerForm {
  height: 380px;
  width: 400px;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 10px;
  padding: 25px 25px;
  z-index: 1;
  position: absolute;
  background-color: white;
}
.registerTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 24px;
}
.btn {
  width: 100%;
}
</style>
